<template>
  <div class="loginPage">
    <!-- 顶部标题区域 -->
    <div class="topBar">
      <div class="img"></div>
      <div class="topBarRight">
        <div class="name">张三,您好</div>
        <div class="title">欢迎使用河北协会"易投保"平台</div>
      </div>
    </div>
    <!-- 卡片内容区域 -->
    <div class="loginCard">
      <div class="card" @click="goInsure()"> 
        <div class="dtitle">新投保</div>
        <div class="spotin">开始新的投保流程</div>
      </div>
      <div class="card" @click="goInformationList()">
        <div class="dtitle">投保查询</div>
        <div class="spotin">查看投保进度和历史</div>
      </div>
    </div>
    <!-- 快捷服务 -->
    <div class="expreSever">快捷服务</div>
    <div class="fCard">
      <div class="card" @click="goChangPassword()">
        <div class="dtitle">重置密码</div>
        <!-- <div class="spotin">开始新的投保流程</div> -->
      </div>
      <div class="card">
        <div class="dtitle" @click="goInsuranceCompany()">保险公司电话</div>
        <!-- <div class="spotin">查看投保进度和历史</div> -->
      </div>
    </div>
    <div class="out" @click="logOut()">
      <div>退出登录</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import {
	getCompanyPhoneList,
} from '/@/api/auth/ytb.ts'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
const companyPhoneList = ref('');
const goInformationList = async() => {
  router.push({ name: 'InformationList', query: { } })
}
const goInsure = async() => {
  router.push({ name: 'insure', query: {} })
}
const goChangPassword = async() => {
  router.push({ name: 'changPassword', query: {} })
}
const goInsuranceCompany = async() => {
  
}
const logOut = async() => {
  router.push({ name: 'login', query: {} })
  sessionStorage.removeItem('formfullData')
}
onMounted( async () => {
  const res = await getCompanyPhoneList()
  companyPhoneList.value = res.data
})
</script>

<style lang="less" scoped>

.loginPage {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.topBar {
  display: flex;
  align-items: center;
  padding: 40px 20px;
  background: linear-gradient(120deg, #409eff, #66b1ff);
  .img {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
  }
  .topBarRight {
    text-align: left;
    margin-left: 10px;
    .name {
      font-size: 13px;
      color: #fff;
    }
    .title {
      font-size: 17px;
      color: #fff;
      font-weight: bold;
    }
  }
}
.expreSever {
  font-size: 17px;
  margin-top: 37px;
  text-align: left;
  font-weight: bold;
  padding-left: 30px;
}
.loginCard {
  display: flex;
  justify-content: space-between;
  margin: -25px 20px 0;
  .card {
    width: 170px;
    min-height: 100px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    .dtitle {
      font-size: 16px;
      margin-top: 20px;
      font-weight: bold;
    }
    .spotin {
      margin-top: 3px;
      font-size: 14px;
    }
  }
}
.fCard {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 0;
  .card {
    width: 170px;
    min-height: 70px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    .dtitle {
      font-size: 16px;
      margin-top: 25px;
      font-weight: bold;
    }
    .spotin {
      margin-top: 3px;
      font-size: 14px;
    }
  }
}
.out {
  width: 100%;
  bottom: 70px;
  display: flex;
  position: fixed;
  justify-content: center;
  div {
    width: 70%;
    padding: 7px 0;
    border-radius: 7px;
    border: 1px solid #000;
  }
}
</style>